{include="header"}

{function="uniform('aristo')"}
{function="jquery_ui('redmond')"}

{if="$dsfm_lang==en"}
	{function="jquery_validate()"}
{else}
	{function="jquery_validate('th')"}
{/if}

<div class ="wrapper">

	<div class = "main" id = "reservation">
		<h1 class = "fr">{$e['online-reservation']}
		{if="$type==1"}
			<span class = "subhead"><b>{$e['group-tour']}</b></span>
		{else}
			<span class = "subhead"><b>{$e['water-park-ticket']}</b></span>
		{/if}
		</h1>

		<div class = "content">

			<form action = "reservation-send.php" method = "post" id = "reservation-form">
			<input type = "hidden" value = "{$type}" name = "type">
			<div class = "ticket-form">
				<h2>{$e['online-reservation']}</h2>
				<span>{$e['reservation-help']}</span>
				<img src="images/graphic-ticket.png" style = "position:absolute;left:680px; top:110px;">
				<ul>
					<li><label for = "date">{$e['date']}</label>
						<input type = "text" name = "date" id = "datepicker" class = "input validate[required]">
						<img src="images/icon-calendar.png" class = "icon-calendar">
						<div class = "clear"></div>
					</li>
					<li><label for = "adult">{$e['adult']}</label>
						<select name = "adult" id = "adult">
							<? for($i=0; $i<=50; $i++){ echo "<option value = '$i'>$i</option>"; } ?>
						</select>
						&nbsp;&nbsp;&nbsp;&nbsp;
						<span class = "price">{$price['adult']} {$e['baht']}</span>
						<div class = "clear"></div>
					</li>
					<li><label for = "kids">{$e['kids']}</label>
						<select name = "kids" id = "kids">
							<? for($i=0; $i<=50; $i++){ echo "<option value = '$i'>$i</option>"; } ?>
						</select>
						&nbsp;&nbsp;&nbsp;&nbsp;
						<span class = "price">{$price['kids']} {$e['baht']}</span>
						&nbsp;&nbsp;&nbsp;&nbsp;
						<span class = "condition">* {$e['condition-kids']}</span>
						<div class = "clear"></div>
					</li>
					<li><label for = "guest">{$e['guest']}</label>
						<select name = "guest" id = "guest">
							<? for($i=0; $i<=50; $i++){ echo "<option value = '$i'>$i</option>"; } ?>
						</select>
						&nbsp;&nbsp;&nbsp;&nbsp;
						<span class = "price">{$price['guest']} {$e['baht']}</span>
						&nbsp;&nbsp;&nbsp;&nbsp;
						<span class = "condition">* {$e['condition-guest']}</span>
						<div class = "clear"></div>
					</li>
					<li><label for = "senior">{$e['senior']}</label>
						<select name = "senior" id = "senior">
							<? for($i=0; $i<=50; $i++){ echo "<option value = '$i'>$i</option>"; } ?>
						</select>
						&nbsp;&nbsp;&nbsp;&nbsp;
						<span class = "price">{$price['senior']} {$e['baht']}</span>
						&nbsp;&nbsp;&nbsp;&nbsp;
						<span class = "condition">* {$e['condition-senior']}</span>
						<div class = "clear"></div>
					</li>
					<li style = "border:none">
						<span>* {$e['condition-baby']}</span>
					</li>
				</ul>
			</div>

			<div class = "reservation-form">
				<h2>{$e['your-information']}</h2>
				<ul>
					<li>
						<label for = "firstname">{$e['firstname']} :</label>
						<input type = "text" id = "firstname" name = "firstname"  class = "input validate[required]" style = "margin-right:40px;">
						<label for = "lastname">{$e['lastname']} :</label>
						<input type = "text" id = "lastname" name = "lastname"  class = "input validate[required]">
						<div class = "clear"></div>
					</li>
					<li>
						<label for = "tel">{$e['telephone']} :</label>
						<input type = "text" id = "tel" name = "tel"  class = "input validate[required]" style = "margin-right:40px;">
						<label for = "email">{$e['email']} :</label>
						<input type = "text" name = "email" id = "email" class = "input validate[required,custom[email]]">
						<div class = "clear"></div>
					</li>
					<li>
						<label for = "detail">{$e['detail']} :</label>
						<textarea name = "detail" id = "detail"  class = "input" style = "height:100px; width:520px;"></textarea>
						<div class = "clear"></div>
					</li>
				</ul>
				<span class = "term">
				
				</span>
				<input type = "submit" value = "submit" class = "btn-submit">
				<div class = "clear"></div>
			</div>
			</form>

		</div>
	</div>

	<div class = "sidebar">
		<ul>
			<li>{$e['online-reservation']}</li>
			<li><a href = "reservation.html?type=1">{$e['group-tour']}</a></li>
			<li><a href = "reservation.html?type=2">{$e['water-park-ticket']}</a></li>
		</ul>
	</div>
</div>

<script>
$(document).ready(function(){
	$( "#datepicker" ).datepicker({
		dateFormat: "dd-mm-yy",
	});

	$("#reservation-form").validationEngine();

	$("#reservation-form").submit(function(){
		var adult = $("[name='adult']").val();
		var kids = $("[name='kids']").val();
		var guest = $("[name='guest']").val();
		var senior = $("[name='senior']").val();

		var total = adult*1 + kids*1 + guest*1 + senior*1;

		<? if ($type == 1) { ?>
			if(total < 15){
				alert("<?=$e['tour-ticket']?>");
			}
		<? }else{ ?>
			if(total < 1){
				alert("<?=$e['select-ticket']?>");
			}
		<? } ?>
	});

	$(".icon-calendar").click(function(){
		$("#datepicker").focus();
	});

	$("select").uniform();
});
</script>

{include="footer"}